<template>
  <div>
    <h1>App</h1>
    <ul>
      <li>
        <RouterLink to="/home/index">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/index">Shop</RouterLink>
      </li>
      <li>
        <RouterLink to="/cart/index">Cart</RouterLink>
      </li>
      <li>
        <RouterLink to="/userindex">User</RouterLink>
      </li>
    </ul>
    {{infoStore.count}} 
    {{infoStore.num}}

    <button @click="infoStore.count++">infoStore.count++</button>
    <button @click="infoStore.num++">infoStore.num++</button>

    <button @click="infoStore.$reset()">reset</button>

    <button @click="infoStore.$patch({count:1000,num:2000})">patch</button>
    <button @click="infoStore.$patch(state=>{
      state.count+=200;
      state.num += 22;
    })">patch</button>
    <hr>
    {{shopStore.count}}
  
    <button @click="shopStore.count++">shopStore.count++</button>
    <hr>


    shopStore.g2 : {{shopStore.g2}}

    <hr>

    {{infoStore.g3(1000)}}
    <hr>
    {{shopStore.g3(1000)}}
    <RouterView></RouterView>
  </div>
</template>
<script setup>

import { useInfoStore,useShopStore } from '@/store'

// 获取状态对象
const infoStore =  useInfoStore();
const shopStore =  useShopStore();




</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>